<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand">简历推送统计表</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center" style="min-height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div class="tabletitle" style="width:100%;">
            <el-row>
              <el-col style="width: 40px;margin-right: 5px;">
                <h5>搜索 : </h5>
              </el-col>
              <el-col :span="12" class="interviewtrack">
                <el-date-picker
                  size="small"
                  v-model="dateValue"
                  type="daterange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="monthChange"
                  align="right">
                </el-date-picker>
                <el-select size="medium" v-model="customername" @change="customerChange" placeholder="请选择客户简称"
                           style="margin-right: 10px;">
                  <el-option v-for="(item,index) in customerList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                <el-select size="medium" v-model="people" @change="peopleChange" placeholder="请选择招聘人员"
                           style="margin-right: 10px;">
                  <el-option v-for="(item,index) in peopleList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
                <el-select size="medium" v-model="state" @change="stateChange" placeholder="请选择面试情况"
                           style="margin-right: 10px;">
                  <el-option v-for="(item,index) in stateList" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
              <el-col :span="11" style="text-align: center;" v-if="loading">
                <img src="../../../static/image/BrowserPreview_tmp.gif" alt=""  style="width: 100px;" >
              </el-col>
              <el-col :span="11" style="text-align:right;float: right;" v-if='!loading'>
                <span style="font-size:16px;" >{{statistics}}</span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            class="tableT"
          >
            <el-table-column prop="recommendedTime" label="推荐日期"></el-table-column>
            <el-table-column prop="name" label="候选人"></el-table-column>
            <el-table-column prop="pusher" label="推荐人"></el-table-column>
            <el-table-column prop="customerName" label="客户简称"></el-table-column>
            <el-table-column prop="post" label="岗位"></el-table-column>
            <el-table-column prop="interviewTime" label="回复面试时间"></el-table-column>
            <el-table-column prop="result" label="面试情况"></el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  
  export default {
    name: "resumePushStatistics",
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        customername: '',
        people: '',
        tableData: [],
        data: {},
        currentPage: 1,
        pagesize: 15,
        totalcount: 0,
        customerList: [],
        peopleList: [],
        dateValue: [new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1), new Date(new Date().getFullYear(), new Date().getMonth() - 1, new Date(new Date().getFullYear(), new Date().getMonth(), 0).getDate())],
        loading : false,
        state  : '',
        stateList : []
      }
    },
    created() {
      this.getOptions();
    },
    computed: {
      statistics() {
        return `总推荐数${this.data.recommendedNum}人，约面试数${this.data.interviewNum}人，放弃面试${this.data.giveUpNum}人，面试通过${this.data.adoptNum}人，面试率${this.data.interviewPercentage}%，入职数${this.data.entryNum}人，入职率${this.data.entryPercentage}%`
      }
    },
    methods: {
      getOptions() {
        axios.post(this.url + "/resumepush/selectoptions", {
          time: this.dateValue
        }).then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.customerList = res.data.data.customerNames;
            this.peopleList = res.data.data.hrNames;
            this.stateList = res.data.data.result;
            if (this.customerList.length > 0 && this.peopleList.length > 0 && this.stateList.length > 0) {
              this.customername = this.customerList[0];
              this.people = this.peopleList[0];
              this.state = this.stateList[0]
            }
            this.getPushResume();
            this.selectpushresumeinfo();
          }
        })
      },
      getPushResume() {
        this.loading = true;
        axios.post(this.url + "/resumepush/selectpushresume", {
          time: this.dateValue,
          customerName: this.customername,
          hrName: this.people,
          type : this.state
        }).then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.data = res.data.data;
            this.loading = false;
          }
        })
      },
      selectpushresumeinfo() {
        axios.post(this.url + "/resumepush/selectpushresumeinfo", {
          time: this.dateValue,
          customerName: this.customername,
          hrName: this.people,
          type : this.state,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.selectpushresumeinfo();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.selectpushresumeinfo();
      },
      monthChange() {
        this.currentPage = 1;
        this.getOptions();
      },
      customerChange() {
        if (this.dateValue && this.people) {
          this.getPushResume();
          this.currentPage = 1;
          this.selectpushresumeinfo();
        }
      },
      peopleChange() {
        if (this.dateValue && this.customername) {
          this.getPushResume();
          this.currentPage = 1;
          this.selectpushresumeinfo();
        }
      },
      stateChange(){
        if (this.dateValue && this.customername) {
          this.getPushResume();
          this.currentPage = 1;
          this.selectpushresumeinfo();
        }
      },
    }
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .hand {
    color: #1099ff;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }

</style>
